{% extends 'common/map.html' %}

{% block title %}Bioregion Discovery Tool{% endblock title %}

{% block metanavigation %}
    {% if user.is_authenticated %}
        <li><a href="#" id="profile">
        {% if user.first_name and user.first_name.strip or user.last_name and user.last_name.strip %}
        {{user.first_name}} {{user.last_name}}{% else %}{{user.username}}{% endif %}</a> | </li>
    {% endif %}

    <li style="display:none;"><a href="#" id="news">news</a> | </li>
    <li style="display:none;"><a href="#" id="about">about</a> | </li>
    {% block meta_navigation_list_insert %}{% endblock %}
    <li><a href="#" id="help">help</a> | </li>
    {% if user.is_authenticated %}
        <li><a href="{% url user_signout %}">sign out</a></li>
    {% else %}
        <li><a href="#" id="register">register</a> | </li>
        <li><a href="#" id="signin">sign in</a></li>
    {% endif %}                
{% endblock metanavigation %}
            
{% block tabs %}
    {% if user.is_authenticated %}
    <li><a href="#MyShapes"><span>My Bioregions</span></a></li> 
    <li><a href="#SharedShapes"><span>Data and Tools</span></a></li>               
    {% endif %}
{% endblock tabs %}

{% block addToOptions %} 
    {% if user.is_authenticated %}
    // options.show_panel='about'; 
    {% else %}
    options.show_panel='about'; 
    {% endif %}                
{% endblock addToOptions %}

{% block js_ready %} 
              var myshapes_visible = $('#SharedShapes').hasClass('ui-tabs-hide');
              if (options.has_features == false && myshapes_visible) {
                $('#flyToLocation').qtip({
                    content: '1. Navigate to your area', 
                    show: { 
                        ready: true, 
                        when: { event: 'load' } 
                    },
                    hide: { when: {event: 'unfocus'} },
                    style: {
                        width: 205,
                        padding: 7,
                        color: 'black',
                        textAlign: 'center',
                        border: {
                            width: 1,
                            radius: 3,
                        },
                        tip: 'leftMiddle',
                        name: 'cream'
                    },
                    position: {
                        corner: {
                            target: 'topMiddle',
                            tooltip: 'topMiddle'
                        }
                    }
                });
                $('#myshapestree').qtip({
                    content: '2. Create a new Bioregion', 
                    show: { 
                        ready: true, 
                        when: { event: 'load' } 
                    },
                    hide: { when: {event: 'unfocus'} },
                    style: {
                        width: 205,
                        padding: 7,
                        color: 'black',
                        textAlign: 'center',
                        border: {
                            width: 1,
                            radius: 3,
                        },
                        tip: 'leftMiddle',
                        name: 'cream'
                    },
                    position: {
                        corner: {
                            target: 'topMiddle',
                            tooltip: 'topMiddle'
                        }
                    }
                });
            }
{% endblock js_ready %}

{% block before_myshapes %}
      <br/>
        <form id="flyToLocation" method="GET">
            <input type="text" name="flyto_location" value="">
            <a id="flytogo" href="#" class="button" onclick="this.blur(); return false;"><span>Fly Here</span></a>
            <a id="flytoclear" href="#" class="button red disabled" onclick="this.blur(); return false;"><span>Clear</span></a>
            <input type="submit" style="display:none;" />
            <br style="clear:both;" />
        </form>
 <!--
        <div id="tip" style="height: 10px;"></div>
-->
{% endblock before_myshapes %}

{% block flyto %}{% endblock flyto %}
{% block datalayers %}{% endblock datalayers %}
{% block tools %}{% endblock tools %}
{% block menu_icons %}{% endblock menu_icons %}
{% block dataLayersTitle %}{% endblock dataLayersTitle %}

{% block before_sharedshapes %}
    <div class="tabs">
        <!--
        <ul>
            <li><a href="#datalayerstree"><span>Data</span></a></li>
            <li><a href="#sharedshapestree"><span>Shared</span></a></li>
            <li><a href="#measurement_tools"><span>Tools</span></a></li>
            <li><a href="#earthOptions"><span>Options</span></a></li>
        </ul>
        -->
    <style type="text/css">
        div .box {
            background-color: white;
            background-repeat: no-repeat;
            border: 1px solid #DDDDDD;
            border-radius: 6px 6px 6px 6px;
            box-shadow: 5px 5px 5px #DDDDDD;
            margin-bottom: 8px;
            margin-top: 4px;
            min-height: 55px;
            padding: 6px;
        }
        #earthOptions li { margin: 0px 0 !important; }
        #earthOptions ul { padding-left: 18px; }
    </style>
    <div class="box">
    <h4 class="kmltree-title"> Shared Bioregions </h4>
{% endblock before_sharedshapes %}

{% block after_sharedshapes %}
    </div>
        <div class="box">
            <div id="datalayerstree"></div>
            <div id="earthOptions">
                <h4 class="kmltree-title">Display Options</h4>
                <ul>
                <li id="overview" class="kmltree-item"><span class="toggler">
                    <img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>
                    <span class="name">Overview Map</span>
                </li>
                <li id="scale" class="kmltree-item"><span class="toggler">
                    <img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>
                    <span class="name">Scale Legend</span>
                </li>
                <li class="visible kmltree-item" id="nav"><span class="toggler">
                    <img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>
                    <span class="name">Navigation Controls</span>
                </li>
                <li id="terrain" class="kmltree-item"><span class="toggler">
                    <img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>
                    <span class="name"> 3d Terrain and Ocean Surface</span>
                </li>
                <li class="visible kmltree-item" id="atm"><span class="toggler">
                    <img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>
                    <span class="name">Atmosphere</span>
                </li>
                </ul>
            </div>
        </div>

        <!--
        <div class="box">
        <h4 class="kmltree-title"> Measurement Tools </h4>
        <br/>
        <div id="measurement_tools" class="tool">

            <a id="measure_distance" href="#" class="button" onclick="this.blur(); return false;"><span><img src="{{MEDIA_URL}}common/images/ruler.png">Measure Distance</span></a>
            <a id="measure_area" href="#" class="button" onclick="this.blur(); return false;"><span><img src="{{MEDIA_URL}}common/images/ruler_square.png">Measure Area</span></a>
            <a id="measure_clear" href="#" class="button red disabled" onclick="this.blur(); return false;"><span>Clear</span></a>
            <p style="clear:both;"></p>
            <p style="clear:both;">
                Choose to measure distance or area and then draw a shape on the map. Double-click when finished drawing.
            </p>
            <div id="measureAmountHolder">
                <span id="measureAmount"></span>
                <select id="measure_units">
                    <option value="metric">metric</option>
                    <option value="english">english</option>
                    <option value="nautical">nautical</option>                            
                </select>
            </div>
        </div>
        </div>
        -->

    </div>
{% endblock after_sharedshapes %}
